<template>
	<div class="theme">
		<van-nav-bar :title="$t('MyProject.v1')" :left-text="$t('MyDividend.v6')" left-arrow @click-left="onClickLeft" />
		<div class="overlay headTop">
			<div class="overlay-content scrolling" style="padding-top:10px;">
				<van-pull-refresh v-model="isLoading" @refresh="onRefresh" pulling-text=" " :loosing-text="$t('MyDividend.v7')" :loading-text="$t('MyDividend.v8')">
					<div style="background: white;margin-bottom: 10px;" v-for="(item,index) in list" :key="item.index" class="bg-overlayColor product-title-color">
						<div style="padding: 10px;">
							<van-row>
								<van-col span="22" @click.native="$router.push({path: '/PropertyDetails',query:{roid: 'MyProject',projectId: item.projectId}})">
									<span v-text="item.title">
                      					豆豆科技公司众筹项目
                    				</span>
									<div style="font-size: 13px;color: rgb(125, 126, 128);padding-top: 5px;" class="product-detail-title">
										<span>
                        					{{$t('MyProject.v2')}}
                      					</span>
										<span>
                        					{{item.joinTime | formatDate}}
                      					</span>
									</div>
								</van-col>
								<van-col span="2" style="padding: 10px 0px;">
									<van-icon name="arrow" size="20" />
								</van-col>
							</van-row>
						</div>
						<div style="padding-top: 10px;border-top: 1px solid #ebedf0;padding-bottom: 10px;" @click="getXQ(item.projectId)" class="product-title-border-color">
							<div style="padding: 10px;" align="center">
								<van-row>
									<van-col span="6" v-text="parseFloat(Number(item.usdtPay)).toFixed(5).slice(0,-1) + ' USDT'">1000 EXUU</van-col>
									<van-col span="6" v-text="parseFloat(Number(item.estatePay)).toFixed(5).slice(0,-1) + ' Estate'">1000 EXUU</van-col>
									<van-col span="6">
										<span v-if="item.status == 1">{{$t('MyProject.v3')}}</span>
										<span v-if="item.status == 2">{{$t('MyProject.v4')}}</span>
									</van-col>
									<van-col span="6" v-text="parseFloat(Number(item.earnings)).toFixed(5).slice(0,-1) + ' ' + $t('PropertyCrowdfunding.v12') + 'USDT'">10 USDT</van-col>
								</van-row>
								<van-row style="color: rgb(125, 126, 128);font-size: 13px;padding-top: 5px;" class="product-detail-title">
									<van-col span="6">{{$t('MyProject.v5')}}</van-col>
									<van-col span="6">{{$t('MyProject.v5')}}</van-col>
									<van-col span="6">{{$t('MyProject.v6')}}</van-col>
									<van-col span="6">{{$t('MyProject.v7')}}</van-col>
								</van-row>
							</div>
						</div>
						<div style="padding-top: 5px;border-top: 1px solid #ebedf0;padding-bottom: 10px;font-size: 14px;" class="product-title-border-color">
							<div style="padding: 10px;">
								<van-row style="color: rgb(125, 126, 128);padding-top: 5px;">
									<van-col span="24">
										<span style="color: rgb(125, 126, 128);" class="product-detail-title">{{$t('MyProject.v8')}}：</span>
										<span style="color: rgb(60, 167, 109);" @click="$router.push({path: '/MyProjectProgress',query:{projectId: item.projectId}})">
                        					<span>{{$t('MyProject.v11')}}</span>
										<van-icon name="arrow" style="position: absolute;margin-top: 3px;margin-left: 5px;" />
										</span>
									</van-col>
								</van-row>
								<van-row style="color: rgb(125, 126, 128);padding-top: 5px;">
									<van-col span="24">
										<span style="color: rgb(125, 126, 128);" class="product-detail-title">{{$t('MyProject.v9')}}：</span>
										<span style="color: rgb(60, 167, 109);" @click="$router.push({path: '/MyDividendRecord',query:{projectId: item.projectId}})">
                        					<span>{{$t('MyProject.v11')}}</span>
										<van-icon name="arrow" style="position: absolute;margin-top: 3px;margin-left: 5px;" />
										</span>
									</van-col>
								</van-row>
								<van-row style="color: rgb(125, 126, 128);padding-top: 5px;">
									<van-col span="24">
										<span style="color: rgb(125, 126, 128);" class="product-detail-title">{{$t('MyProject.v10')}}：</span>
										<span style="color: rgb(60, 167, 109);" @click="$router.push({path: '/MySettlementRecord',query:{projectId: item.projectId}})">
                        					<span>{{$t('MyProject.v11')}}</span>
										<van-icon name="arrow" style="position: absolute;margin-top: 3px;margin-left: 5px;" />
										</span>
									</van-col>
								</van-row>
							</div>
						</div>
					</div>
					<div style="color: #969799;font-size: 13px;line-height: 50px;text-align: center">{{$t('MyDividend.v9')}}</div>
				</van-pull-refresh>
			</div>
		</div>
	</div>
</template>

<script>
	import { crowdfunding } from './../utils/api';
	import { formatDate } from './../utils/date';
	let _this;
	export default {
		name: "MyProject",
		data() {
			return {
				list: [],
				isLoading: false
			};
		},
		beforeCreate() {
			_this = this;
		},
		mounted() {
			this.getList();
		},
		methods: {
			getList() {
				crowdfunding.getProjectMine().then(res => {
					if(res.code == 200) {
						this.list = res.data;
					}
				})
			},
			onRefresh() { // 下拉刷新
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: _this.$t('MyDividend.v10')
					});
					this.isLoading = false;
				}, 500);
			},
			getXQ(id) {
				this.$router.push({
					path: '/MoneyDetails',
					query: {
						projectId: id
					}
				});
			},
			onClickLeft() {
				this.$router.push({
					path: '/ForMy'
				});
			}
		},
		filters: {
			formatDate(time) {
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm');
			}
		}
	}
</script>

<style lang="less" scoped>
	.overlay {
		background: rgb(245, 245, 245);
		color: black;
	}
	
	.head {
		background: white;
		color: black;
	}
	
	.head .return:after {
		border-color: #000;
	}
	
	.van-pull-refresh {
		overflow: visible!important;
	}
</style>